<template>
	<view>
		<view class="search-box">
			<my-search @click='gotoSearch'></my-search>
		</view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="v in swiperList" :key="v.id">
				<navigator class="swiper-item" :url="'/subpkg/good_detail/good_detail?goods_id='+(v.id+394)">
					<image :src="v.image" alt=''></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 分类导航区 -->
		<view class="nav-list">
			<view class="nav-item" v-for="v in navList" :key="v.id" @click="navClickHandler(v.name)">
				<image :src="v.icon" class="nav-img" mode=""></image>
				<text>{{v.name}}</text>
			</view>
		</view>
		<!-- 楼层滚动区 -->
		<view class="floor-list">
			<view class="floor-box" v-for="v in floorList" :key="v.id">
				<text>{{v.title}}</text>
				<view class="floor-item">
					<navigator v-for="item in v.children" :key="item.id" :url="item.navigate_url">
						<image :src="item.url" mode="widthFix"></image>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				//轮播图数据
				swiperList: [],
				navList: [],
				floorList: [{
						title: '时尚女装',
						id: 1,
						children: [{
								url: '/static/floor/8.jpeg',
								navigate_url: '/subpkg/good_list/good_list?query=服饰',
								id: 11
							},
							{
								url: '/static/floor/9.jpeg',
								navigate_url: '/subpkg/good_list/good_list?query=热',
								id: 12
							}
						]
					},
					{
						title: '户外运动',
						id: 2,
						children: [{
								url: '/static/floor/10.jpeg',
								navigate_url: '/subpkg/good_list/good_list?query=爆款',
								id: 21
							},
							{
								url: '/static/floor/11.jpeg',
								navigate_url: '/subpkg/good_list/good_list?query=登山',
								id: 22
							}
						]
					},
					{
						title: '精品零食',
						id: 3,
						children: [{
								url: '/static/floor/12.jpeg',
								navigate_url: '/subpkg/good_list/good_list?query=神器',
								id: 31
							},
							{
								url: '/static/floor/13.jpeg',
								navigate_url: '/subpkg/good_list/good_list?query=无敌',
								id: 32
							}
						]
					},
				]
			};
		},
		onLoad() {
			this.getSwiperList()
			this.getNavList()
			// uni.request({
			// 	url:"https://applet-base-api-t.itheima.net",
			// 	method:"GET",
			// 	success(res) {
			// 		console.log(res.data)
			// 	}
			// })
		},
		methods: {
			getSwiperList: function() {
				uni.request({
					url: 'https://applet-base-api-t.itheima.net/slides',
					method: "GET",
				}).then(res => {
					this.swiperList = res.data

					uni.showToast({
						title: '成功获取数据',
						icon: 'none'
					})
				})
				// uni.request({
				// 	url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
				// 	method:'GET',
				// 	success: (res) => {
				// 		console.log(res,'swiper')
				// 	}
				// })
			},
			getNavList: function() {
				uni.request({
					url: "https://applet-base-api-t.itheima.net/categories",
					method: "GET"
				}).then(res => {
					this.navList = res.data.slice(0, 4);
				})
			},
			navClickHandler(name) {
				// console.log((name))
				if (name === '美食') {
					uni.switchTab({
						url: '/pages/cate/cate'
					})
				}
			},
			gotoSearch(){
				uni.navigateTo({
					url:'/subpkg/search/search'
				})
			}
		},

	}
</script>

<style lang="scss">
	.search-box{
		position: sticky;
		top: 0;
		left: 0;
		z-index: 999;
	}
	swiper {
		width: 100%;
		height: 330rpx;

		.swiper-item,
		image {
			width: 100%;
			height: 100%;
		}
	}

	.nav-list {
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		background-color: #fff;

		.nav-item {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 15rpx;

			.nav-img {
				height: 100rpx;
				width: 100rpx;
			}
		}
	}

	.floor-box {
		display: flex;
		flex-direction: column;

		text {
			font-size: 28rpx;
			height: 60rpx;
			line-height: 60rpx;
			padding-left: 20rpx;
		}

		.floor-item {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-around;
			box-sizing: border-box;
			navigator{
				width: 48%;
			}
			image {
				width: 100%;
			}
		}
	}
</style>
